<template>
  <div class="main">
    <h2 class="main-index">实验六</h2>
    <p class="main-title">Bode图</p>
    <!-- <p class="sub-title">设一阶系统的传递函数为</p>
    <img class="formula" src="../assets/img/2.png" /> -->
    <div class="formula-box">
      <p class="tip">G(s)</p>
      <p class="tip">=</p>
      <div class="insert">
        <div class="top">
          <input v-model="bForm.b0" />+ <input v-model="bForm.b1" />s+
          <input v-model="bForm.b2" />s²+ <input v-model="bForm.b3" />s³+
          <input v-model="bForm.b4" />s⁴+ <input v-model="bForm.b5" />s⁵
        </div>
        <div class="bottom">
          <input v-model="aForm.a0" />+ <input v-model="aForm.a1" />s+
          <input v-model="aForm.a2" />s²+ <input v-model="aForm.a3" />s³+
          <input v-model="aForm.a4" />s⁴+ <input v-model="aForm.a5" />s⁵
        </div>
      </div>
    </div>
    <div class="line-box">
      <p v-for="(item, index) in TArr" :key="index">
        <span>{{ item }}</span>
        <span :style="{ background: colorArr[index] }"></span>
      </p>
    </div>
    <div id="mapbox" ref="mapbox"></div>
    <div id="mapbox2" ref="mapbox2"></div>
    <!-- <van-field style="margin-bottom: 0.2rem" v-model="TNumber" type="number" center clearable label="ω" placeholder="请输入T值">
      <template #button>
        <van-button size="small" @click="submit" type="primary">提交</van-button>
      </template>
    </van-field> -->
    <div class="btn-box">
      <a href="javascript:;" @click="showHelp" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">帮助</a>
      <a href="javascript:;" @click="run" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">提交</a>
      <a href="javascript:;" @click="clearData" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">清除</a>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { Toast } from "vant";
import { colorArr } from "../utils/config";
export default {
  name: "onePage",
  data() {
    return {
      bForm: {
        b0: "",
        b1: "",
        b2: "",
        b3: "",
        b4: "",
        b5: "",
      },
      aForm: {
        a0: "",
        a1: "",
        a2: "",
        a3: "",
        a4: "",
        a5: "",
      },
      TNumber: 0, // 输入值
      TArr: [], // 已提交的T值集合
      colorArr,
      myChart: null,
      myChart2: null,
      option: null,
      option2: null,
      yAxisType: "category",
      yAxisArr: [-1, -0.5, 0, 0.5, 1],
      // xAxisArr: [0, 250, 500, 750, 1000],
      xAxisArr: [0, 1, 10, 100, 1000],
      seriesArr: [], // 计算后的值集合
      seriesArr2: [], // 计算后的值集合

      num: 0,
      aaForm: {
        aa0: 0,
        aa1: 0,
        aa2: 0,
        aa3: 0,
        aa4: 0,
        aa5: 0,
      },
      bbForm: {
        bb0: 0,
        bb1: 0,
        bb2: 0,
        bb3: 0,
        bb4: 0,
        bb5: 0,
      },
      arrX: [],
      arrY: []
    };
  },
  methods: {
    initChart() {
      const normalFontSize = 12;
      const normalNameFontSize = 16;
      const needClear = false;
      this.myChart = this.$echarts.init(document.getElementById("mapbox"));
      this.option = {
        title: {
          text: "",
        },
        tooltip: {
          axisPointer: {
            type: 'line',
            axis: 'y',
            triggerOn: 'none',
            snap: true,
            lineStyle: {
              color: 'rgba(86,86,86,0.50)'
            }
          }
        },
        xAxis: {
          // type: this.yAxisType,
          type: "category",
          name: "{a|w/s}{b|-1}",
          nameLocation: "center",
          // max: 1000,
          // min: 0,
          nameGap: "25",
          nameTextStyle: {
            fontSize: normalNameFontSize,
            formatter: "{a|ω/s}",
            rich: {
              a: {
                fontSize: 16,
              },
              b: {
                fontSize: 10,
                verticalAlign: "top",
              },
            },
          },
          boundaryGap: false,
          data: this.xAxisArr,
          axisLabel: {
            // interval:1,
            fontSize: normalFontSize,
            // formatter: (v) => {
            //   let item = "";
            //   if (v === 0) {
            //     item = "0";
            //   } else if (v == 250) {
            //     item = "1";
            //   } else if (v == 500) {
            //     item = "10";
            //   } else if (v == 750) {
            //     item = "100";
            //   } else if (v == 1000) {
            //     item = "1000";
            //   }
            //   return item;
            // },
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        yAxis: {
          name: "dB",
          type: this.yAxisType,
          show: true,
          nameTextStyle: {
            fontSize: normalNameFontSize,
          },
          boundaryGap: false,
          data: this.yAxisArr,
          axisLabel: {
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        series: this.seriesArr,
      };
      this.myChart.setOption(this.option);
    },
    initChart2() {
      const normalFontSize = 12;
      const normalNameFontSize = 16;
      const needClear = false;
      this.myChart2 = this.$echarts.init(document.getElementById("mapbox2"));
      this.option2 = {
        title: {
          text: "",
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          // type: this.yAxisType,
          name: "{a|w/s}{b|-1}",
          nameLocation: "center",
          nameGap: "25",
          // max: 1000,
          // min: 0,
          nameTextStyle: {
            fontSize: normalNameFontSize,
            formatter: "{a|ω/s}",
            rich: {
              a: {
                fontSize: 16,
              },
              b: {
                fontSize: 10,
                verticalAlign: "top",
              },
            },
          },
          boundaryGap: false,
          data: this.xAxisArr,
          axisLabel: {
            // interval:1,
            fontSize: normalFontSize,
            // formatter: (v) => {
            //   let item = "";
            //   if (v === 0) {
            //     item = "0";
            //   } else if (v == 250) {
            //     item = "1";
            //   } else if (v == 500) {
            //     item = "10";
            //   } else if (v == 750) {
            //     item = "100";
            //   } else if (v == 1000) {
            //     item = "1000";
            //   }
            //   return item;
            // },
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        yAxis: {
          name: "度",
          type: this.yAxisType,
          show: true,
          nameTextStyle: {
            fontSize: normalNameFontSize,
          },
          boundaryGap: false,
          data: this.yAxisArr,
          axisLabel: {
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        series: this.seriesArr2,
      };
      this.myChart2.setOption(this.option2);
    },
    showHelp() {
      this.$weui.alert(
        "<p>1.本实验绘制系统的Bode图;</p><p>2.用户输入系统传递分子、分母多项式的系数;</p><p>3.系统分子、分母多项式最高阶次为5次;</p><p>4.用户按“提交”按钮系统进行仿真,按“清除”按钮清除参数和仿真结果，可以重新输入参数和仿真。</p>",
        {
          title: "帮助",
          className: "help",
          buttons: [
            {
              label: "确定",
              type: "primary",
              onClick: function () {
                console.log("ok");
              },
            },
          ],
        }
      );
    },
    submit() {
      if (this.seriesArr.length) {
        Toast.fail("请先点击清除按钮");
        return;
      }
      if (this.TArr.length >= 5) {
        return;
      }
      if (!this.TNumber || this.TNumber < 0 || this.TNumber > 10000) {
        Toast.fail("T值不合法");
        return;
      }
      this.TArr.push(this.TNumber);
    },
    clearData() {
      this.TNumber = 0;
      this.TArr = [];
      this.myChart = null;
      this.option = null;
      this.yAxisType = "category";
      this.yAxisArr = [-1, -0.5, 0, 0.5, 1];
      this.xAxisArr = [0, 250, 500, 750, 1000];
      this.seriesArr = [];
      this.seriesArr2 = [];
      this.bForm = {
        b0: "",
        b1: "",
        b2: "",
        b3: "",
        b4: "",
        b5: "",
      };
      this.aForm = {
        a0: "",
        a1: "",
        a2: "",
        a3: "",
        a4: "",
        a5: "",
      };
      this.$echarts.init(this.$refs.mapbox).dispose();
      this.$echarts.init(this.$refs.mapbox2).dispose();
      this.$nextTick(() => {
        this.initChart();
        this.initChart2();
      });
    },
    getdata() {
      let num = 0;
      let w = 0.1;
      let tmpx = 1;
      let tmpy = 1;
      let fai = 0;
      let that = this;
      while (w <= 2000) {
        let tht1 = that.bbForm.bb0 - that.bbForm.bb2 * w * w + that.bbForm.bb4 * w * w * w * w;
        let tht2 = that.bbForm.bb1 * w - that.bbForm.bb3 * w * w * w + that.bbForm.bb5 * w * w * w * w * w;
        let tht3 = that.aaForm.aa0 - that.aaForm.aa2 * w * w + that.aaForm.aa4 * w * w * w * w;
        let tht4 = that.aaForm.aa1 * w - that.aaForm.aa3 * w * w * w + that.aaForm.aa5 * w * w * w * w * w;
        let xx = (tht1 * tht3 + tht2 * tht4) / (tht3 * tht3 + tht4 * tht4);
        let yy = (tht2 * tht3 - tht1 * tht4) / (tht3 * tht3 + tht4 * tht4);
        let lwa = Math.sqrt(xx * xx + yy * yy);
        that.arrX[num] = 20 * (Math.log(lwa) / Math.log(10));
        let wa = Math.log(10 * w) / Math.log(10);

        if (xx == 0) {
          if (yy >= 0) {
            fai = 90;
          } else {
            fai = -90;
          }
        } else if (xx < 0) {
          if (yy > 0) {
            if (num > 0 && that.arrY[num - 1] <= 0) {
              fai = -180 + (Math.atan(yy / xx) * 180) / Math.PI;
            } //
            else {
              fai = 180 + (Math.atan(yy / xx) * 180) / Math.PI;
            } //
          }

          if (yy < 0) {
            if (num > 0 && that.arrY[num - 1] >= 0) {
              fai = 180 + (Math.atan(yy / xx) * 180) / Math.PI;
            } //
            else {
              fai = -180 + (Math.atan(yy / xx) * 180) / Math.PI;
            }
            //
          }
          if (yy == 0) {
            fai = -180;
          }
        } else {
          {
            fai = (Math.atan(yy / xx) * 180) / Math.PI;
          }
        }

        that.arrY[num] = fai;
        tmpx = xx;
        tmpy = yy;
        w = w * Math.pow(10, 0.01);
        num = num + 1;

      }
      console.log('arrY', that.arrY)
      console.log('arrX', that.arrX)
      console.log('num', num)
      console.log('tmpx', tmpx)
      console.log('tmpy', tmpy)
    },
    run() {
      const that = this;
      if (this.seriesArr.length) {
        Toast.fail("请先点击清除按钮");
        return;
      }
      const valueArr = Object.values(this.bForm).concat(
        Object.values(this.aForm)
      );
      let noValue = valueArr.some((item) => {
        return Boolean(Number(item));
      });
      if (!noValue) {
        Toast.fail("请输入系数");
        return;
      }

      if (this.aForm.a0 === "") { this.aaForm.aa0 = 0; } else { this.aaForm.aa0 = this.aForm.a0; }
      if (this.aForm.a1 === "") { this.aaForm.aa1 = 0; } else { this.aaForm.aa1 = this.aForm.a1; }
      if (this.aForm.a2 === "") { this.aaForm.aa2 = 0; } else { this.aaForm.aa2 = this.aForm.a2; }
      if (this.aForm.a3 === "") { this.aaForm.aa3 = 0; } else { this.aaForm.aa3 = this.aForm.a3; }
      if (this.aForm.a4 === "") { this.aaForm.aa4 = 0; } else { this.aaForm.aa4 = this.aForm.a4; }
      if (this.aForm.a5 === "") { this.aaForm.aa5 = 0; } else { this.aaForm.aa5 = this.aForm.a5; }
      if (this.bForm.b0 === "") { this.bbForm.bb0 = 0; } else { this.bbForm.bb0 = this.bForm.b0; }
      if (this.bForm.b1 === "") { this.bbForm.bb1 = 0; } else { this.bbForm.bb1 = this.bForm.b1; }
      if (this.bForm.b2 === "") { this.bbForm.bb2 = 0; } else { this.bbForm.bb2 = this.bForm.b2; }
      if (this.bForm.b3 === "") { this.bbForm.bb3 = 0; } else { this.bbForm.bb3 = this.bForm.b3; }
      if (this.bForm.b4 === "") { this.bbForm.bb4 = 0; } else { this.bbForm.bb4 = this.bForm.b4; }
      if (this.bForm.b5 === "") { this.bbForm.bb5 = 0; } else { this.bbForm.bb5 = this.bForm.b5; }

      if (Math.abs(this.aaForm.aa0) + Math.abs(this.aaForm.aa1) + Math.abs(this.aaForm.aa2) + Math.abs(this.aaForm.aa3) + Math.abs(this.aaForm.aa4) + Math.abs(this.aaForm.aa5) != 0) {
        this.getdata();
      } else {
        Toast.fail("Error");
      }


      // let lineData = []
      // let lineData2 = []

      // console.log(lineData)
      that.seriesArr = [{
        data: that.arrX,
        type: "line",
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: that.colorArr[0],
        },
        // markLine: {
        //     silent: true,
        //     data: [{
        //       name:' ',
        //       yAxis: 30,
        //     },{
        //       name:' ',
        //       yAxis: -30,
        //     }],
        //     lineStyle: {
        //       color: '#ff0000',
        //         normal: {
        //             type: 'dashed'
        //     }
        //   }
        // }
      }]
      that.seriesArr2 = [{
        data: that.arrY,
        type: "line",
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: that.colorArr[0],
        },
        // markLine: {
        //     silent: true,
        //     data: [{
        //       name:' ',
        //       yAxis: 30,
        //     },{
        //       name:' ',
        //       yAxis: -30,
        //     }],
        //     lineStyle: {
        //         color: '#ff0000',
        //         normal: {
        //             type: 'dashed'
        //     }
        //   }
        // }
      }]

      this.yAxisType = 'value'
      this.xAxisArr = null
      // this.option.xAxis.axisLabel = {}
      // this.option2.xAxis.axisLabel = {}
      // console.log(this.option)
      this.$echarts.init(this.$refs.mapbox).dispose()
      this.$echarts.init(this.$refs.mapbox2).dispose()
      this.myChart.dispose()
      this.$nextTick(() => {
        this.initChart()
        this.initChart2()
      })
    },
  },
  mounted() {
    this.initChart();
    this.initChart2();
  },
};
</script>

<style scoped>
.formula-box {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}

.formula-box .tip {
  font-size: 0.45rem;
}

.formula-box .insert {
  font-size: 0.38rem;
  margin-left: 2px;
}

.formula-box .insert .top {
  padding-bottom: 4px;
  border-bottom: 1px solid #333;
  margin-bottom: 4px;
}

.formula-box input {
  width: 6.5vw;
  height: 4vw;
  font-size: 0.35rem;
  margin-right: 1px;
}

.line-box p {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.line-box p span:first-child {
  color: #333;
  width: 12vw;
  overflow: hidden;
  line-height: 0.4rem;
  font-size: 0.45rem;
  margin-right: 12px;
}

.line-box p span:last-child {
  width: 10vw;
  height: 4px;
  display: inline-block;
}
</style>